<template>
    <div app-container>
        <el-row type="flex" justify="center">
            <el-col :span="21">
                <div align="center" style="background-color: lightgray;height: 60px;">
                    <div>
                        <span id="mainTitle">订单详情</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-descriptions title="" name="1" size="medium" :column="3" class="con">
                    <template slot="title">
                        <p class="title">订单状态</p>
                    </template>
                    <el-descriptions-item label="订单编号">
                        <span v-text="info.orderNum" />
                    </el-descriptions-item>
                    <el-descriptions-item label="放款状态">
                        <dict-tag :options="dict.type.loan_info_credit_status" :value="info.creditStatus" />
                    </el-descriptions-item>
                    <el-descriptions-item label="审核结果">
                        <dict-tag :options="dict.type.loan_info_applicant_status" :value="info.applicantStatus" />
                    </el-descriptions-item>
                    <el-descriptions-item label="贷款金额">
                        <span v-text="info.loanAmount" />
                    </el-descriptions-item>
                    <el-descriptions-item label="利率/年">
                        <span v-text="(info.monRate*1200).toFixed(1)" />%
                    </el-descriptions-item>
                    <el-descriptions-item label="应放款金额">
                        <span v-text="info.loanAmount" />
                    </el-descriptions-item>
                    <el-descriptions-item label="手续费">
                        <span />
                    </el-descriptions-item>
                    <el-descriptions-item label="居间服务费">
                        <span v-text="(info.servCharge*100).toFixed(1)" />%
                    </el-descriptions-item>
                </el-descriptions>
                <hr>
            </el-col>
        </el-row>
        <el-row class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-descriptions title="" size="medium" :column="3" class="con">
                    <template slot="title">
                        <p class="title">产品信息</p>
                    </template>
                    <el-descriptions-item label="产品名">
                        <span v-text="info.productionName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="贷款支付给">
                        <span v-text="info.clientName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="渠道">
                        <span v-text="info.channelName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="还款方式">
                        <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
                    </el-descriptions-item>
                    <el-descriptions-item label="期数">
                        <span v-text="info.periods" />
                    </el-descriptions-item>
                    <el-descriptions-item label="转换天数">
                        <span v-text="info.periods*30" />
                    </el-descriptions-item>
                    <el-descriptions-item label="综合利率">
                        <span />
                    </el-descriptions-item>
                    <el-descriptions-item label="罚息计算方式">
                        <span />
                    </el-descriptions-item>
                    <el-descriptions-item label="居间服务费">
                        <span v-text="(info.servCharge*100).toFixed(1)" />%
                    </el-descriptions-item>
                </el-descriptions>
                <hr>
            </el-col>
        </el-row>
        <el-row class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-descriptions title="借款信息" name="1" size="medium" :column="3" class="con">
                    <template slot="title">
                        <p class="title">客户信息</p>
                    </template>
                    <el-descriptions-item label="客户姓名">
                        <span v-text="info.clientName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号码">
                        <span v-text="info.phone" />
                    </el-descriptions-item>
                    <el-descriptions-item label="贷款金额">
                        <span v-text="info.loanAmount" />
                    </el-descriptions-item>
                    <el-descriptions-item label="还款方式">
                        <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
                    </el-descriptions-item>
                    <el-descriptions-item label="银行卡号">
                        <span v-text="info.bankCardNo" />
                    </el-descriptions-item>
                    <el-descriptions-item label="银行">
                        <span v-text="info.bankName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="客户备注">
                        <span v-text="info.remark" />
                    </el-descriptions-item>
                </el-descriptions>
                <hr>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="20">
                <el-descriptions title="审核状态" name="1" size="medium" :column="3" class="con">
                    <template slot="title">
                        <p class="title">渠道信息</p>
                    </template>
                    <el-descriptions-item label="渠道名">
                        <span v-text="info.channelName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="结算帐期">
                        <span v-text="info.periods" />
                    </el-descriptions-item>
                    <el-descriptions-item label="联系人">
                        <span v-text="info.linkman" />
                    </el-descriptions-item>
                    <el-descriptions-item label="联系人电话">
                        <span v-text="info.phoneNum" />
                    </el-descriptions-item>
                    <el-descriptions-item label="业务员">
                        <span v-text="info.userName" />
                    </el-descriptions-item>
                    <el-descriptions-item label="业务员电话">
                        <span v-text="info.phoneNumber" />
                    </el-descriptions-item>
                </el-descriptions>
                <hr>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="20">
                <div>
                    <p class="title">还款计划</p>
                    <el-table :data="paymentPlan" border style="width: 100%" label-class-name="con">
                        <el-table-column prop="periods" label="期数" />
                        <el-table-column prop="loanTime" label="账单日期" width="180" />
                        <el-table-column prop="money" label="本金" />
                        <el-table-column prop="rate" label="利息" />
                        <el-table-column prop="defaultRate" label="罚息" />
                        <el-table-column prop="giveMoney" label="待还金额" />
                        <el-table-column prop="gmStatus" label="还款状态" />
                        <el-table-column prop="hTime" label="还款时间" width="180">
                            <template slot-scope="scope">
                                <span v-if="scope.row.hTime!= null">
                                    {{ parseTime(scope.row.hTime ) }}
                                </span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="gmStatus" label="操作">
                            <template slot-scope="scope" v-if="gmStatus != '已结清'">
                                <el-button  @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
                                    size="small">
                                    结清
                                </el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <br />
                    <div style="text-align: end;">
                        <el-button type="primary" plain @click="liquidate">一次性结清</el-button>
                    </div>
                    <hr>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="一次性结清" :visible.sync="open1" width="600px" append-to-body>
            <el-row type="flex" justify="center">
                <el-col :span="20">
                    <el-descriptions size="medium" :column="1">
                        <el-descriptions-item label="未还金额（元）">
                            <span v-text="square.money-square.giveMoney" />
                        </el-descriptions-item>
                        <el-descriptions-item label="本次还款金额（元）">
                            <span v-text="square.money-square.giveMoney" />
                        </el-descriptions-item>
                        <el-descriptions-item label="本次结清本金（元）">
                            <span v-text="square.money-square.giveMoney" />
                        </el-descriptions-item>
                        <el-descriptions-item label="本次结清违约金（元）">
                            <span v-text="0" />
                        </el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-input v-model="square.remark" placeholder="请输入备注" />
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="20"><span style="color:chocolate;">注意：</span></el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="20"><span style="color:chocolate;">提前结清后金额会自动计算到第一个未结清的帐单上，其他帐单会自动删除</span></el-col>
            </el-row>
            <div slot="footer">
                <el-button type="primary" @click="settleSure">确 定</el-button>
                <el-button @click="settlecancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-row type="flex" justify="center">
            <el-col :span="20">
                <div>
                    <p class="title">授信历史</p>
                    <el-table :data="tableData" border style="width: 100%" label-class-name="con">
                        <el-table-column prop="" label="期数" />
                        <el-table-column prop="" label="账单日期" width="180" />
                        <el-table-column prop="" label="本金" />
                    </el-table>
                    <hr>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="20">
                <div>
                    <p class="title">修改记录</p>
                    <el-table :data="tableData" border style="width: 100%" label-class-name="con">
                        <el-table-column prop="" label="姓名" />
                        <el-table-column prop="" label="修改内容" width="180" />
                        <el-table-column prop="" label="修改时间" />
                    </el-table>
                    <hr>
                </div>
            </el-col>
        </el-row>
        <div class="fixed-button">
            <el-row type="flex" justify="end">
                <el-col :span="6" :offset="5">
                    <el-button type="primary" @click="collectionManager">催收负责人</el-button>
                </el-col>
                <el-col :span="6" :offset="4">
                    <el-button type="warning" @click="abandonCollection">放弃催收</el-button>
                </el-col>
                <el-col :span="6" :offset="3">
                    <el-button type="primary" @click="clientRemark">客户备注</el-button>
                </el-col>
                <el-col :span="6" :offset="2">
                    <el-button type="primary" @click="reback">返回上一个页面</el-button>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="催收负责人" :visible.sync="open2" width="500px" append-to-body>
            <el-form ref="form" :model="form">
                <el-form-item prop="remark">
                    <span>修改催收负责人 </span>
                    <el-select v-model="value" placeholder="请选择催收负责人" style="width: 360px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="remark">
                    <span>修改备注</span>
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="放弃催收" :visible.sync="open3" width="500px" append-to-body>
            <el-form ref="form" :model="form">
                <el-form-item prop="remark">
                    <span>取消理由</span>
                    <el-input v-model="form.remark" type="textarea" placeholder="请取消原因" />
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="abandonSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="客户备注" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form">
                <el-form-item prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="addAdvise">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>

import { newViewDetails } from '@/api/viewDetails'
import { clientRemark } from '@/api/billList'
import { UpdateLendingOrder, FindLendingOrderById } from '@/api/lendingOrder'
import index from '../../../components/Breadcrumb/index.vue'
import now from 'lodash/now'
export default {
    components: { index },
    name: 'LendingOrderDetail',
    dicts: ['loan_info_payment_method', 'loan_info_applicant_status', 'loan_info_credit_status'],
    data() {
        return {
            loading: true,
            open1: false,
            open2: false,
            open3: false,
            open: false,
            title: '',
            form: [],
            info: [],
            square: {
                periods: '3期',
                money: 15000,
                giveMoney: 5400,
                remark: undefined
            },
            paymentPlanData: [
                {
                    periods: '3期',
                    loanTime: '2022-09-18 12:20:20',
                    money: 15000,
                    rate: 150,
                    defaultRate: 250,
                    giveMoney: 5400,
                    gmStatus: '已结清',
                    hTime: '2022-10-05 12:20:20'
                },
                {
                    periods: '3期',
                    loanTime: '2022-09-18 12:20:20',
                    money: 15000,
                    rate: 150,
                    defaultRate: 0,
                    giveMoney: 5150,
                    gmStatus: '待还中',
                    hTime: '2022-11-05 12:20:20'
                }, {
                    periods: '3期',
                    loanTime: '2022-09-18 12:20:20',
                    money: 15000,
                    rate: 150,
                    defaultRate: 0,
                    giveMoney: 5150,
                    gmStatus: '待还中',
                    hTime: '2022-12-05 12:20:20'
                }
            ],
            paymentPlan: [],
            id: undefined,
            options: [{
                value: '1',
                label: '老张'
            }, {
                value: '2',
                label: '老李'
            }, {
                value: '3',
                label: '老唐'
            }],
            value: '',
            tableData: [],
            allData: [
                {
                    title: '',
                    data: []
                }
            ],
            form: {
                clientId: undefined,
                remark: undefined,
                status: '0'
            },
        }
    },
    created() {
        this.id = this.$route.params && this.$route.params.loanId
        this.form.clientId = this.$route.params && this.$route.params.clientId
        this.getList(this.id)
    },
    methods: {
        getList(id) {
            newViewDetails(id).then(res => {
                this.allData = res.data
            }).catch()
            FindLendingOrderById(id).then(res => {
                this.info = res.data
            }).catch()
            this.paymentPlan = this.paymentPlanData
        },
        reback(){
            this.open = false
            this.$router.go(-1)
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
        },
        liquidate() {
            this.open1 = true
        },
        settleSure() {
            this.open1 = false
            this.paymentPlan = [{
                periods: '3期',
                loanTime: '2022-09-18 12:20:20',
                money: 15000,
                rate: 150,
                defaultRate: 250,
                giveMoney: 0,
                gmStatus: '已结清',
                hTime: now()
            }]

        },
        settlecancel() {
            this.open1 = false
        },
        collectionManager() {
            this.open2 = true
        },
        abandonCollection() {
            this.open3 = true
        },
        clientRemark() {
            this.open = true
        },
        firstTrial() {
            this.reset()
            this.open = true
            this.title = '进行初审'
        },
        cancel() {
            this.open = false
            this.reset()
        },
        reset() {
            this.form = {
                id: undefined,
                status: '0',
                creditChannel: undefined
            }
            this.resetForm('form')
        },
        submitForm: function () {
            this.open = false
            this.$router.go(-1)
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
        },
        abandonSubmit() {
            this.open = false
            this.$router.go(-1)
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
        },
        addAdvise() {
            this.$refs['form'].validate(valid => {
                console.log(this.$refs['form'])
                debugger
                if (valid) {
                    clientRemark(this.form).then(res => {
                        console.log(res)
                        if (res.code == 200) {
                            this.$modal.msgSuccess(res.msg)
                            this.open = false
                            this.$router.go(-1)
                            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
                        } else {
                            this.$modal.msgSuccess(res.msg)
                        }
                        this.open = false
                    }).catch()
                }
            })
        }
    }
}
</script>
<style>
body>.el-container {
    margin-bottom: 40px;
    display: inline-block;
}

#mainTitle {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    float: left;
    height: 60px;
    margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
    float: left;
    /* width: 20%;  */
    margin-left: 50px;
}

.long {
    width: 1050px;
    margin-left: 50px;
}

.short {
    float: left;
    /* width: 450px; */
    margin-left: 50px;
}

.title {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
}

.secondTitle {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bolder;
    color: #303133;
    background-color: aqua;
    height: 35px;
}

.con {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bolder;
    color: #303133;
}

.fixed-button {
    position: fixed;
    right: 139px;
    bottom: 10px;
    padding: 8px;
    text-align: right;
}
</style>
  